<template>
  <div>
    <el-card class="box-card">
      <!-- 1第一行 -->
      <div class="one">
        <!-- 面包屑 -->
        <!-- <a href="http://125.3.com" target='blank'> wenjian</a> -->
        <el-breadcrumb separator="/">
          <el-breadcrumb-item
            ><span style="color: gray"> 资源配置</span></el-breadcrumb-item
          >
          <el-breadcrumb-item>友情链接</el-breadcrumb-item>
        </el-breadcrumb>
      </div>
      <!-- 2第二行 -->
      <div class="two">
        <div class="btn">
          <el-button
            style="background-color: #004fe0; color: white"
            @click="openers"
            >新增</el-button
          >
          <el-button
            style="color: #004fe0; border: 1px solid #004fe0"
            @click="looklink"
            >预览</el-button
          >
        </div>
        <div class="select">
          <el-input
            placeholder="请输入链接名称"
            suffix-icon="el-icon-search"
            v-model="page.name"
            @input="selsects()"
          >
          </el-input>
        </div>
      </div>
      <!-- 3 第三行 -->
      <div class="three">
        <el-table border :data="linktable" style="width: 100%">
          <el-table-column type="index" label="序号" width="150" height="46">
            <template slot-scope="scope">
              <div>
                {{ scope.$index + (page.pageNum - 1) * page.pageSize + 1 }}
              </div>
            </template>
          </el-table-column>
          <el-table-column
            prop="linkName"
            label="链接名称"
            width="280"
            height="46"
          >
          </el-table-column>
          <el-table-column prop="linkUrl" label="链接地址" height="46">
          </el-table-column>
          <el-table-column prop="sort" label="排序" height="46">
          </el-table-column>
          <el-table-column label="操作" height="46">
            <template slot-scope="scope">
              <div>
                <el-link
                  :underline="false"
                  type="primary"
                  @click="ed(scope.row)"
                  >编辑</el-link
                >
                <el-link
                  :underline="false"
                  type="primary"
                  @click="del(scope.row)"
                  >删除</el-link
                >
              </div>
            </template>
          </el-table-column>
        </el-table>
        <!-- 分页 -->
        <div class="block">
          <el-pagination
            background
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="page.pageNum"
            :page-sizes="[10, 20, 30]"
            layout="total, prev, pager, next, sizes,jumper"
            :total="total"
          >
          </el-pagination>
        </div>
      </div>
    </el-card>
    <!-- 新增对话框 -->
    <el-dialog
      :before-close="addClose"
      title="新增"
      :visible.sync="addlog"
      width="525px"
    >
      <div>
        <el-form
          :model="addform"
          ref="links"
          :rules="links"
          label-width="140px"
          class="demo-ruleForm"
        >
          <el-form-item label="链接名称" prop="linkName">
            <el-input
              maxlength="20"
              show-word-limit
              type="text"
              placeholder="请输入链接名称"
              v-model="addform.linkName"
              @focus="closeinput('links')"
            ></el-input>
          </el-form-item>
          <el-form-item label="链接地址" prop="linkUrl">
            <!-- <el-input @focus='closeinput("links")' maxlength="100" show-word-limit type="text" placeholder="请输入" v-model="addform.linkUrl"></el-input> -->
            <el-input
              @focus="closeinput('links')"
              resize="none"
              maxlength="100"
              show-word-limit
              :rows="4"
              placeholder="请输入链接地址"
              type="textarea"
              v-model="addform.linkUrl"
            ></el-input>
          </el-form-item>
          <el-form-item label="排序" prop="sort">
            <el-input
              placeholder="请输入排序"
              v-model.number="addform.sort"
            ></el-input>
          </el-form-item>
        </el-form>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="addClose()">取 消</el-button>
        <el-button
          style="background-color: #004fe0; color: white"
          @click="addbao('links')"
          >保 存</el-button
        >
      </span>
    </el-dialog>
    <!-- 编辑对话框 -->
    <el-dialog
      :before-close="edClose"
      title="编辑"
      :visible.sync="edlog"
      width="525px"
    >
      <div>
        <el-form
          ref="bianjiform"
          :model="addform"
          :rules="linkss"
          label-width="140px"
          class="demo-ruleForm"
        >
          <el-form-item label="链接名称" prop="linkName">
            <el-input
              maxlength="20"
              show-word-limit
              type="text"
              placeholder="请输入"
              v-model="addform.linkName"
              @focus="closeinput('bianjiform')"
            ></el-input>
          </el-form-item>
          <el-form-item label="链接地址" prop="linkUrl">
            <!-- <el-input maxlength="100" show-word-limit type="text" @focus='closeinput("bianjiform")' placeholder="请输入" v-model="addform.linkUrl"></el-input> -->
            <el-input
              @focus="closeinput('bianjiform')"
              resize="none"
              maxlength="100"
              show-word-limit
              :rows="4"
              placeholder="请输入链接地址"
              type="textarea"
              v-model="addform.linkUrl"
            ></el-input>
          </el-form-item>
          <el-form-item label="排序" prop="sort">
            <el-input
              placeholder="请输入"
              v-model.number="addform.sort"
            ></el-input>
          </el-form-item>
        </el-form>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="edClose">取 消</el-button>
        <el-button
          style="background-color: #004fe0; color: white"
          @click="bianji('bianjiform')"
          >保 存</el-button
        >
      </span>
    </el-dialog>
    <!-- 预览对话框 -->
    <el-dialog
      class="yulan"
      :show-close="false"
      :visible.sync="looks"
      width="800px"
    >
      <div class="pig">
        <div style="font-size: 20px">友情链接</div>
        <div class="list">
          <div class="closes" @click="looks = false"></div>
          <div class="items" v-for="(item, index) in lists" :key="index">
            <a :href="item.url" target="_blank" style="color: white">
              {{ item.naem }}</a
            >
          </div>
        </div>
      </div>
    </el-dialog>
    <!-- 遮罩层 -->
    <div
      v-loading="mockloading"
      v-show="mockloading"
      element-loading-text="正在保存中"
      element-loading-spinner="el-icon-loading"
      element-loading-background="rgba(255, 255, 255, 0.5)"
      class="mocks"
    ></div>
  </div>
</template>
<script>
//获取友情链接   新增保存  删除友情链接  获取所有友情的链接
import {
  getLinks,
  addLinks,
  delLinks,
  getLinksall,
} from "@/api/srapi/srapi.js";
export default {
  name: "friendlink",
  data() {
    return {
      //遮罩层loadding
      mockloading: false,
      numberlist: [],
      //1.页码
      page: {
        pageSize: 10, //条数
        pageNum: 1, //页码
        //查询条件
        name: null,
      },
      //总数
      total: null,
      //2 表格数据
      linktable: [],
      //3.新增对话框数据
      addform: {
        id: null,
        linkName: "",
        linkUrl: "",
        sort: null,
        linkImg: null,
      },
      //名字数组
      namearr: [],
      urlarr: [], //地址数组
      //新增对话框规则 { min: 3, max: 5, message: '长度在 3 到 5 个字符', trigger: 'blur' }
      links: {
        linkName: [
          { required: true, message: "链接名称为必填项", trigger: "blur" },
          {
            validator: (rule, value, callback) => {
              if (this.namearr.indexOf(value) >= 0) {
                callback(new Error("改名称已存在"));
              } else {
                callback();
              }
            },
            trigger: "blur", //这里还有blur触发方法； 如果设为none，那么只有this.$refs[formName]['validate']时才会验证
          },
        ],
        linkUrl: [
          { required: true, message: "链接地址为必填项", trigger: "blur" },
          {
            validator: (rule, value, callback) => {
              if (
                /^(?:http(s)?:\/\/)?[\w.-]+(?:\.[\w\.-]+)+[\w\-\._~:/?#[\]@!\$&'\*\+,;=.]+$/.test(
                  value
                ) == false
              ) {
                callback(new Error("请输入正确网址"));
              } else {
                callback();
              }
            },
            trigger: "blur", //这里还有blur触发方法； 如果设为none，那么只有this.$refs[formName]['validate']时才会验证
          },
          {
            validator: (rule, value, callback) => {
              if (this.urlarr.indexOf(value) >= 0) {
                callback(new Error("该网址已存在"));
              } else {
                callback();
              }
            },
            trigger: "blur", //这里还有blur触发方法； 如果设为none，那么只有this.$refs[formName]['validate']时才会验证
          },
        ],
        sort: [
          { required: true, message: "排序为必填项", trigger: "blur" },
          {
            type: "number",
            message: "数值为数字型",
          },
          {
            validator: (rule, value, callback) => {
              if (value <= 0) {
                callback(new Error("排序为正整数"));
              } else {
                callback();
              }
            },
            trigger: "blur", //这里还有blur触发方法； 如果设为none，那么只有this.$refs[formName]['validate']时才会验证
          },
        ],
      },
      linkss: {
        linkName: [
          { required: true, message: "链接名称为必填项", trigger: "blur" },
          {
            validator: (rule, value, callback) => {
              if (this.namearr.indexOf(value) >= 0) {
                callback(new Error("改名称已存在"));
              } else {
                callback();
              }
            },
            trigger: "blur", //这里还有blur触发方法； 如果设为none，那么只有this.$refs[formName]['validate']时才会验证
          },
        ],
        linkUrl: [
          { required: true, message: "链接地址为必填项", trigger: "blur" },
          {
            validator: (rule, value, callback) => {
              if (
                /^(?:http(s)?:\/\/)?[\w.-]+(?:\.[\w\.-]+)+[\w\-\._~:/?#[\]@!\$&'\*\+,;=.]+$/.test(
                  value
                ) == false
              ) {
                callback(new Error("请输入正确网址"));
              } else {
                callback();
              }
            },
            trigger: "blur", //这里还有blur触发方法； 如果设为none，那么只有this.$refs[formName]['validate']时才会验证
          },
          {
            validator: (rule, value, callback) => {
              if (this.urlarr.indexOf(value) >= 0) {
                callback(new Error("该网址已存在"));
              } else {
                callback();
              }
            },
            trigger: "blur", //这里还有blur触发方法； 如果设为none，那么只有this.$refs[formName]['validate']时才会验证
          },
        ],
        sort: [
          { required: true, message: "排序为必填项", trigger: "blur" },
          {
            type: "number",
            message: "请输入数字",
          },
          {
            validator: (rule, value, callback) => {
              if (value <= 0) {
                callback(new Error("排序为正整数"));
              } else {
                callback();
              }
            },
            trigger: "blur", //这里还有blur触发方法； 如果设为none，那么只有this.$refs[formName]['validate']时才会验证
          },
        ],
      },
      //对话框新增
      addlog: false,
      //编辑对话框
      edlog: false,
      //预览对话框
      looks: false,
      //
      lists: [],
      //编辑展示原来的数组
      bianjislist: [],
      //当前编辑的索引
      ind: null,
      //需要编辑的数组
      indlist: [],
      //新增需要的数组
      addlists: [],
      //原来的数组
      addolist: [],
    };
  },
  computed: {},
  methods: {
    //找到索引
    findindexs(arr, value, key) {
      for (let i = 0; i < arr.length; i++) {
        if (arr[i][key] == value) {
          return i;
        }
      }
    },
    //获取焦点失去验证
    closeinput(val) {
      // console.log(1);
      this.$refs[val].clearValidate();
    },
    //预览框  获取所有链接
    async looklink() {
      const { data: res } = await getLinksall();
      console.log(res);
      const arr = res.data.sort((a, b) => {
        return a.sort - b.sort;
      });
      this.lists = arr.map((item) => {
        return {
          naem: item.linkName,
          url: item.linkUrl,
        };
      });
      console.log(this.lists);
      this.looks = true;
    },
    // 1获取友情链接
    async getlink() {
      try {
        const { data } = await getLinks(this.page);
        // console.log(data);
        this.linktable = data.data.data;
        this.total = data.data.totalElements * 1;
        // console.log(this.linktable);
      } catch (error) {
        console.log(11);
      }
    },
    //2新增 保存链接
    async addlink(val) {
      const datas = await addLinks(val);
      console.log(datas);
      if (datas.data.msg !== "success") {
        this.$message({
          message: datas.data.msg,
          type: "error",
        });
      } else {
        // this.$message({
        //   message: "新增成功",
        //   type: "success",
        // });
      }
    },
    //3 删除友情链接
    async dellink(val) {
      await delLinks(val);
    },
    //4搜索按钮
    selsects() {
      let handele;
      clearTimeout(handele);
      handele = setTimeout(() => {
        this.page.pageNum = 1;
        this.getlink(this.page);
      }, 400);
    },
    //打开新增按钮
    async openers() {
      this.indlist = [];
      const res = await getLinksall();
      this.numberlist = res.data.data.map((item) => {
        return item.sort;
      });
      console.log(this.numberlist);
      this.addlists = res.data.data;
      this.addolist = JSON.parse(JSON.stringify(res.data.data));
      this.addform = {};
      this.namearr = this.addlists.map((item, index) => {
        return item.linkName;
      });
      console.log(this.addlists);
      this.urlarr = this.addlists.map((item, index) => {
        return item.linkUrl;
      });
      if (this.addlists.length >= 9) {
        this.$message({
          message: "友情链接上限9个请先删除",
          type: "error",
        });
      } else {
        this.addlog = true;
      }
      //  this.addlog = true
    },
    //关闭新增框
    addClose() {
      (this.addform = {
        id: null,
        linkName: "",
        linkUrl: "",
        sort: null,
        linkImg: null,
      }),
        (this.addlog = false);
      this.$refs.links.clearValidate();
    },
    //确认新增
    addbao(refname) {
      this.$refs[refname].validate((valid) => {
        if (valid) {
          try {
            this.mockloading = true;
            if (this.numberlist.indexOf(this.addform.sort) < 0) {
              // this.addform.sortEnd=null
            } else {
              var ind = this.findindexs(
                this.addolist,
                this.addform.sort,
                "sort"
              );
              console.log(ind);
              if (ind == 0) {
                this.addolist.unshift({ sort: this.addolist[0].sort - 1 });
                ind = 1;
                for (
                  let index = ind;
                  index < this.addolist.length &&
                  this.addolist[index].sort - this.addolist[index - 1].sort < 2;
                  index++
                ) {
                  //  console.log(index);
                  //  console.log(this.addolist[index+1].sort);
                  //  console.log(this.addolist[index].sort);
                  //  console.log(this.addolist[index-1].sort-this.addolist[index].sort);
                  //  console.log('------------');
                  this.indlist.push(this.addolist[index]);
                }
                this.addform.sortEnd =
                  this.indlist[this.indlist.length - 1].sort;
              } else if (ind == this.addolist.length - 1) {
                console.log("252525");
                console.log(ind);
                this.addform.sortEnd =
                  this.addolist[this.addolist.length - 1].sort;
              } else {
                // if (this.addolist[ind+1].sort-this.addolist[ind].sort<2 ) {
                //      for (let index = ind+1; index < this.addolist.length && this.addolist[index+1].sort-this.addolist[index].sort<2; index++){
                // this.indlist.push(this.addolist[index])
                //  }
                //  this.addform.sortEnd=this.indlist[this.indlist.length-1].sort
                // }else{
                //    this.addolist.splice(ind,1,{sort:this.addolist[this.addolist.length-1].sort})
                //     for (let index = ind+1; index < this.addolist.length && this.addolist[index].sort-this.addolist[index-1].sort<2; index++){
                // this.indlist.push(this.addolist[index])
                //  }
                //  this.addform.sortEnd=this.indlist[this.indlist.length-1].sort
                // }
                if (this.addolist[ind + 1].sort - this.addolist[ind].sort > 1) {
                  this.addform.sortEnd = this.addolist[ind].sort;
                } else {
                  this.addolist.push({
                    sort: this.addlists[this.addlists.length - 1].sort + 3,
                  });
                  for (
                    let index = ind;
                    index < this.addolist.length - 1 &&
                    this.addolist[index + 1].sort - this.addolist[index].sort <
                      2;
                    index++
                  ) {
                    this.indlist.push(this.addolist[index]);
                  }
                  this.addform.sortEnd =
                    this.indlist[this.indlist.length - 1].sort + 1;
                }
              }
            }
            // console.log(this.indlist[this.indlist.length-1].sort);
            // console.log(this.indlist);
            console.log(this.addform);
            this.addlink(this.addform);
            this.addlog = false;
            this.addform = {
              id: null,
              linkName: "",
              linkUrl: "",
              sort: null,
              linkImg: null,
            };
            setTimeout(() => {
              this.mockloading = false;
              this.getlink();
              this.$message({
                message: "新增成功",
                type: "success",
              });
            }, 1000);
          } catch (error) {
            this.$message({
              message: "请按照要求填写",
              type: "error",
            });
          }
        } else {
          this.$message({
            message: "请输入必填项",
            type: "error",
          });
          return false;
        }
      });
    },
    //每页条数改变触发
    handleSizeChange(val) {
      this.page.pageSize = val;
      this.getlink();
    },
    //当前页改变时触发
    handleCurrentChange(val) {
      this.page.pageNum = val;
      this.getlink();
    },
    //删除
    del(dat) {
      this.$confirm("此操作将永久删除该链接, 是否继续?", "删除链接", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          this.dellink({ ids: [dat.id] });
          setTimeout(() => {
            this.getlink();
          }, 500);
          this.$message({
            type: "success",
            message: "删除成功!",
          });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除",
          });
        });
    },
    //编辑按钮
    async ed(dat) {
      //名字数组
      (this.namearr = []), (this.urlarr = []); //地址数组
      const res = await getLinksall();
      console.log(dat);
      console.log(res.data.data);
      this.bianjislist = res.data.data;
      console.log(this.bianjislist);
      this.bianjislist.map((item, index) => {
        if (item.linkName !== dat.linkName) {
          this.namearr.push(item.linkName);
        }
      });
      console.log(this.namearr);
      this.bianjislist.map((item, index) => {
        if (item.linkUrl !== dat.linkUrl) {
          this.urlarr.push(item.linkUrl);
        }
      });
      console.log(this.urlarr);
      this.ind = this.findindexs(this.bianjislist, dat.id, "id");
      console.log(this.ind);
      this.addform = dat;
      this.edlog = true;
    },
    //编辑按钮关闭
    edClose() {
      this.addform = {
        id: null,
        linkName: "",
        linkUrl: "",
        sort: null,
        linkImg: null,
      };
      this.edlog = false;

      this.$refs.bianjiform.clearValidate();
      this.getlink();
    },
    //编辑保存
    bianji(refname) {
      this.$refs[refname].validate((valid) => {
        if (valid) {
          try {
            this.mockloading = true;
            console.log(this.addform);
            // this.addlink(this.addform);
            // const ind =this.findindexs(this.bianjislist,this.addform.sort,'sort')
            // console.log(ind);
            // if (ind<0) {
            // }else{
            //说明是降序
            //       if (ind < this.ind ) {
            //         console.log(ind);
            //         console.log(this.ind);
            //        for (let index = ind; index < this.ind; index++) {
            //          this.indlist.push(this.bianjislist[index])
            //        }
            //       }else{
            //      for (let index = this.ind; index <= ind; index++) {
            //          this.indlist.push(this.bianjislist[index])
            //        }
            //       }
            //             }
            //         this.indlist.forEach(item => {
            //           if (ind<this.ind) {
            //               item.sort+=1
            //           }else{
            //             item.sort-=1
            //           }

            //         });
            //      this.indlist.push(this.addform);
            //      console.log(this.indlist);
            //  this.indlist.forEach((item,index) => {
            //    setTimeout(()=>{
            //  this.addlink(item)
            //    },index*2500)
            //   });
            this.addlink(this.addform);
            setTimeout(() => {
              this.$message({
                message: "编辑成功",
                type: "success",
              });
              this.getlink();
              this.mockloading = false;
              this.indlist = [];
            }, 500);

            this.edlog = false;
          } catch (error) {
            this.$message({
              message: "请按照要求填写",
              type: "error",
            });
          }
        } else {
          this.$message({
            message: "请按照要求填写",
            type: "error",
          });
          return false;
        }
      });
    },
  },
  created() {
    this.getlink();
  },
};
</script>
<style lang="scss" scoped>
//卡片
.box-card {
  //  width: 100%;
  margin-left: 24px;
  margin-top: 80px;
  margin-right: 24px;
  padding-left: 24px;
  padding-right: 24px;
  padding-top: 18px;
  padding-bottom: 100px;
}
/deep/.el-card__body {
  padding: 0 !important;
  .one {
    .el-breadcrumb {
      font-size: 20px;
      height: 29px;
      line-height: 29px;
    }
  }
  // 第二行
  .two {
    display: flex;
    justify-content: space-between;
    margin-top: 34px;
    .btn {
      display: flex;
      justify-content: space-between;
      .el-button {
        margin-right: 16px;
        margin-left: 0;
        height: 32px;
        line-height: 8px;
      }
    }
    .select {
      .el-input__inner {
        width: 210px;
        height: 32px;
        padding-left: 10px;
        line-height: 36px;
      }
      .el-input__inner:focus {
        border-color: #2672ed;
        box-shadow: 0px 0px 0px 2px rgb(197, 208, 238);
      }
      /deep/.el-input__icon {
        margin-right: 10px;
      }
    }
  }
  //第三行
  .three {
    margin-top: 12px;
  }
}
//操作按钮
/deep/.el-link--inner {
  margin-right: 20px;
}
//分页

//总条数
.el-pagination {
  position: relative;
  text-align: right;
  height: 72px;
  border: 1px solid #e6e6e6;
  border-top: 0;
  padding-top: 16px;
  padding-bottom: 24px;
  padding-right: 24px;
  /deep/ .el-pagination__total {
    position: absolute;
    left: 10px;
  }
  /deep/ .el-input__inner {
    height: 32px;
  }
}
//增加对话框
/deep/.el-dialog__title {
  font-size: 20px;
  font-weight: 600;
}
/deep/.el-dialog__headerbtn .el-dialog__close {
  color: black;
  font-size: 20px;
}
/deep/.el-form-item__label {
  text-align: left;
}
//预览对话框
.yulan {
  margin-top: 150px;
  /deep/.el-dialog__header {
    padding: 0;
  }
  /deep/.el-dialog__body {
    padding: 0;
  }
  .pig {
    background-color: #1b1c20;
    padding: 32px;
    color: white;
  }
  .list {
    font-size: 16px;
    font-weight: 400;
    color: white;
    padding-top: 32px;
    display: flex;
    flex-wrap: wrap;

    .items {
      // flex: 33.3%;
      width: 33.3%;
      margin-top: 16px;
    }
    .closes {
      width: 45px;
      height: 45px;
      border-radius: 50%;
      background: url("./close.png") no-repeat center;
      background-size: 100% 100%;
      position: absolute;
      right: -25px;
      top: -25px;
    }
  }
}
// 表格头样式
/deep/.has-gutter > tr > th {
  background-color: #f7f9fc;
  height: 46px;
  font-size: 14px;
  font-weight: 500;
  color: #1b1c20;
}
// 表格体
/deep/tbody > .el-table__row > td {
  height: 64px;
  font-size: 14px;
  font-weight: 500;
}

/deep/.el-link.el-link--primary {
  font-size: 12px;
  color: #006eff;
}
// 表格
/deep/ .el-pagination.is-background .el-pager li:not(.disabled).active {
  background-color: #004fe0;
}
/deep/.el-pagination .el-select .el-input .el-input__inner:hover {
  border: 1px solid #004fe0;
}
/deep/ .el-select .el-input__inner:focus {
  border: 1px solid #004fe0;
}
//  /deep/.el-pagination[data-v-7ab274fc] .el-input__inner:hover {
// border:1px solid  #004fe0 ;
//  }
//  /deep/.el-pagination[data-v-7ab274fc] .el-input__inner:focus {
// border:1px solid  #004fe0 ;
//  }
</style>
<style >
.el-select-dropdown__item.selected {
  color: #004fe0;
  font-weight: 500;
}
/* .el-pagination[data-v-7ab274fc] .el-input__inner:hover {
border:1px solid  #004fe0 ;
 }
.el-pagination[data-v-7ab274fc] .el-input__inner:focus {
border:1px solid  #004fe0 ;
 } */
/* //删除弹框 */
.el-button--primary {
  height: 32px;
  width: 72px;
  line-height: 8px;
  background-color: #004fe0 !important;
}
.el-button--small {
  height: 32px;
  width: 72px;
  line-height: 8px;
  border: 1px solid #004fe0;
  color: #004fe0;
}
/* // 遮罩层 */
.mocks {
  position: fixed;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  z-index: 22;
  font-size: 40px;
}
</style>
